﻿@page "/grouped"

<h3>Grouped Chart</h3>

<Chart Config="_config1" @ref="_chart1" Height="400px"></Chart>

<hr />

<h3>Code</h3>

<p>
    This is the component to add in your page.
</p>

<CodeSnippet Language="Language.xml" Style="Style.VisualStudio">
    &ltChart Config="_config1" &#64;ref="_chart1">&lt;Chart>
</CodeSnippet>

<p>
    Then, in the code section, add the following code:
</p>

<CodeSnippet Language="Language.csharp" Style="Style.VisualStudio" LoadMainScript="false">
private BarChartConfig? _config1;
private Chart? _chart1;

_config1 = new BarChartConfig()
    {
        Options = new Options()
        {
            Plugins = new Plugins()
            {
                Title = new Title()
                {
                    Display = true,
                    Text = "Population growth (millions)",
                    Font = new Font()
                    {
                        Size = 18
                    }
                }
            }
        }
    };

_config1.Data.Labels = BarDataExamples.GroupedLabels;
_config1.Data.Datasets.Add(new BarDataset()
    {
        Label = "Africa",
        Data = BarDataExamples.Grouped1.ToList(),
        BackgroundColor = new List&lt;string>() { "#3e95cd" }
    });
_config1.Data.Datasets.Add(new BarDataset()
    {
        Label = "Europe",
        Data = BarDataExamples.Grouped2.ToList(),
        BackgroundColor = new List&lt;string>() { "#8e5ea2" }
    });
</CodeSnippet>

@code {
    private BarChartConfig? _config1;
    private Chart? _chart1;

    protected override async Task OnInitializedAsync()
    {
        _config1 = new BarChartConfig()
            {
                Options = new Options()
                {
                    Plugins = new Plugins()
                    {
                        Title = new Title()
                        {
                            Display = true,
                            Text = "Population growth (millions)",
                            Font = new Font()
                            {
                                Size = 18
                            }
                        }
                    }
                }
            };

        _config1.Data.Labels = BarDataExamples.GroupedLabels;
        _config1.Data.Datasets.Add(new BarDataset()
            {
                Label = "Africa",
                Data = BarDataExamples.Grouped1.ToList(),
                BackgroundColor = new List<string>() { "#3e95cd" }
            });
        _config1.Data.Datasets.Add(new BarDataset()
            {
                Label = "Europe",
                Data = BarDataExamples.Grouped2.ToList(),
                BackgroundColor = new List<string>() { "#8e5ea2" }
            });
    }
}